<html lang="en">
<head>
  <title>Relative Locators</title>
  <style>
    table {
      text-align: center;
      border: solid;
    }
    td {
      border: solid;
    }
    #center {
      width: 100px;
    }
    #rectangles {
      position: relative;
    }
    #rectangles div {
      position: absolute;
      border: 1px solid black;
      height: 50px;
      width: 50px;
    }
    #a {
      left: 25px;
      top: 0;
    }
    #b {
      left: 78px;
      top: 30px;
    }
    #c {
      left: 131px;
      top: 60px;
    }
    #d {
      left: 0;
      top: 53px;
    }
    #e {
      left: 53px;
      top: 83px;
    }
    #f {
      left: 106px;
      top: 113px;
    }
    #proximity .small {
      border: 1px solid black;
      width: 100px;
      height: 50px;
      margin: 5px 25px;
    }
    #proximity .big {
      border: 1px solid black;
      width: 150px;
      height: 400px;
    }
    #rect3 {
      margin: 60px 25px;
    }
  </style>
</head>
<body>
<h1>Relative Locator Tests</h1>
<section id="paragraphs">
  <p id="above">This text is above.</p>
  <p id="mid">This is a paragraph of text in the middle.</p>
  <p id="below">This text is below.</p>
</section>

<table>
  <tr>
    <td id="topLeft">1</td>
    <td id="top">2</td>
    <td id="topRight">3</td>
  </tr>
  <tr>
    <td id="left">4</td>
    <td id="center">5</td>
    <td id="right">6</td>
  </tr>
  <tr>
    <td id="bottomLeft">7</td>
    <td id="bottom">8</td>
    <td id="bottomRight">9</td>
  </tr>
</table>

<section id="rectangles">
  <div id="a">El-A</div>
  <div id="b">El-B</div>
  <div id="c">El-C</div>
  <div id="d">El-D</div>
  <div id="e">El-E</div>
  <div id="f">El-F</div>
</section>

<section id="proximity">
  <div class="small" id="rect1">Rectangle 1</div>
  <div class="big" id="rect2">Rectangle 2, which is near Rectangle 1</div>
  <div class="small" id="rect3">Rectangle 3</div>
  <div class="big" id="rect4">
    Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away
  </div>
</section>

</body>
</html>
